<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider theme="light" v-model="collapsed" collapsible>
      <div class="school-logo" v-if="collapsed"/>
      <div class="logo" v-else/>
      <a-menu
        theme="light"
        :default-selected-keys="[defaultMenu]"
        mode="inline"
        @click="handleClick"
      >
        <a-menu-item v-for="page in pageConfig" :key="page.key">
          <a-icon :type="page.icon"></a-icon>
          <span>{{ page.name }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-content style="margin: 24px;">
        <div :style="{ padding: '24px', background: '#fff' }">
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <img src="../assets/yb_logo.png" alt="" width="180">
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data () {
    return {
      collapsed: false,
      currentPage: '数据统计',
      pageConfig: [
        {
          name: '数据统计',
          icon: 'pie-chart',
          key: 'Statistics'
        },
        {
          name: '新生信息',
          icon: 'team',
          key: 'StuList'
        },
        {
          name: '权限配置',
          icon: 'user',
          key: 'Permissions'
        },
        {
          name: '数据导入',
          icon: 'desktop',
          key: 'AddData'
        },
        {
          name: '个性化配置',
          icon: 'file',
          key: 'Config'
        }
      ]
    }
  },
  computed: {
    defaultMenu () {
      return this.$route.name
    }
  },
  methods: {
    handleClick (e) {
      const key = e.key
      this.$router.push(key)
      this.currentPage = this.pageConfig.filter(page => {
        return page.key === key
      })[0].name
    }
  }
}
</script>

<style>
#components-layout-demo-side .logo {
  height: 56px;
  background-image: url('../assets/yb_logo.png');
  margin: 10px;
  background-size: 100%;
  background-repeat: no-repeat;
}
#components-layout-demo-side .school-logo {
  height: 56px;
  background-image: url('../assets/mini-logo.png');
  margin: 10px;
  background-size: 100%;
  background-repeat: no-repeat;
}
</style>
